<template>
  <div class="chart-component">
    <div class="chart-header">
      仅选择两列及以上特征时展示可视化结果，横坐标及纵坐标是降到二维后的数据范围
    </div>
    <div class="chart-content">
      <div v-if="chartDataEmpty" class="operator-chart-empty">
        <img alt="" src="@/assets/view/empty2.png" />
        暂无图表数据
      </div>
      <div v-else id="scatter-chart-id"></div>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * 经济类算子节点 - 数据平滑图表
 */
import { Component, Vue, Watch } from 'vue-property-decorator'
import DataStore from '@/store/modules/dataview'
import { ScatterChart } from '@zjlabvis/vis-charts'

@Component({
  components: {},
})
export default class NeighborAnalysisChart extends Vue {
  private chartData: any[] = [] // 图表数据
  public chartDataEmpty: boolean = false // 空数据
  public compInstance: any = ''

  // 图表数据
  public get getQueryDataVis() {
    return DataStore.getQueryDataVis || {}
  }

  public get commonConfig() {
    return {
      value: this.chartData,
      valueKey: 'y',
      labelKey: 'x',
      xAxisAttribute: 'x',
      colorField: 'type',
      // size: ['100%', 372],
      pointRadius: 5,
      tooltipIsShow: true,
      labelIsShow: false,
      labelTextMaxlength: 4,
      legendIsShow: true,
      legendPosition: 'right',
      xAxisGridIsShow: true,
      yAxisGridIsShow: true,
      xAxisGridWidth: 1,
      yAxisGridWidth: 1,
      xAxisGridStyle: 'solid',
      yAxisGridStyle: 'solid',
      xAxisTickIsShow: true,
      yAxisTickIsShow: true,
      xAxisLineWidth: 2,
      yAxisLineWidth: 2,
      colors: this.colors,
      xAxisTitleIsShow: true,
      yAxisTitleIsShow: true,
      xAxisTitleFontSize: 14,
      yAxisTitleFontSize: 14,
    }
  }

  @Watch('getQueryDataVis', { deep: true })
  private watchChartResult() {
    const keys: string[] = Object.keys(this.getQueryDataVis)
    if (this.compInstance && !this.chartDataEmpty) {
      this.compInstance.destroy()
    }
    if (keys.length > 0) {
      this.chartDataEmpty = false
      this.$nextTick(() => {
        this.init()
      })
    } else {
      this.chartDataEmpty = true
      this.compInstance = ''
    }
  }

  public colors: string[] = ['#0125f4']

  public async init() {
    this.colors = ['#0125f4']
    const visInliers: any = this.getQueryDataVis.vis_inliers
    const visNearestInliers: any = this.getQueryDataVis.vis_nearest_inliers
    const visOutliers: any = this.getQueryDataVis.vis_outliers
    this.chartDataEmpty =
      visInliers.length === 0 &&
      visNearestInliers.length === 0 &&
      visOutliers.length === 0
    this.chartData = []
    const chartData: any[] = []
    visInliers.forEach((element: any) => {
      const item: any = {
        x: element[0],
        y: element[1],
        type: '降维后的正常数据',
      }
      chartData.push(item)
    })
    visOutliers.forEach((element: any) => {
      const item: any = {
        x: element[0],
        y: element[1],
        type: '降维后的异常数据',
      }
      chartData.push(item)
    })
    if (visInliers.length > 0) {
      this.colors.push('#c72823')
    }
    visNearestInliers.forEach((element: any) => {
      const item: any = {
        x: element[0],
        y: element[1],
        type: '已替换的邻近数据',
      }
      chartData.push(item)
    })
    if (visNearestInliers.length > 0) {
      this.colors.push('#4a6b1e')
    }
    this.chartData = chartData
    this.compInstance = new ScatterChart('scatter-chart-id', this.commonConfig)
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/scroll-bar';

.chart-component {
  height: 100%;
  width: 100%;

  .chart-header {
    display: flex;
    justify-content: space-between;
    line-height: 24px;
    margin-bottom: 14px;
    min-height: 24px;
    width: 100%;
  }

  .chart-content {
    background: #fff;
    padding: 8px 20px;
    width: 100%;

    .operator-chart-empty {
      align-items: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
</style>
